<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=
    , initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!-- 1. 利用对象数组里面的数据来渲染页面，渲染多个数据
    2. 鼠标经过停留会显示`英雄名字` -->
    <ul class="list">
        <script>
            let datas = [
                { name: '司马懿', imgSrc: '01.jpg' },
                { name: '女娲', imgSrc: '02.jpg' },
                { name: '百里守约', imgSrc: '03.jpg' },
                { name: '亚瑟', imgSrc: '04.jpg' },
                { name: '虞姬', imgSrc: '05.jpg' },
                { name: '张良', imgSrc: '06.jpg' },
                { name: '安其拉', imgSrc: '07.jpg' },
                { name: '李白', imgSrc: '08.jpg' },
                { name: '阿珂', imgSrc: '09.jpg' },
                { name: '墨子', imgSrc: '10.jpg' },
                { name: '鲁班', imgSrc: '11.jpg' },
                { name: '嬴政', imgSrc: '12.jpg' },
                { name: '孙膑', imgSrc: '13.jpg' },
                { name: '周瑜', imgSrc: '14.jpg' },
                { name: 'XXX', imgSrc: '15.jpg' },
                { name: 'XXX', imgSrc: '16.jpg' },
                { name: 'XXX', imgSrc: '17.jpg' },
                { name: 'XXX', imgSrc: '18.jpg' },
                { name: 'XXX', imgSrc: '19.jpg' },
                { name: 'XXX', imgSrc: '20.jpg' }
            ]
            for (let i = 0; i < datas.length; i++) {
                let item = datas[i]
                document.write(`<li><img src="${item.imgSrc}" title="${datas[i].name}" alt=""></li>`)
            }

        </script>
</body>

</html>